<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
		<style type="text/css" media="screen">
			html, body, canvas {
				margin: 0;
				padding: 0;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
			var WIDTH;
			var HEIGHT;
			var canvas;
			var context;
			var balls = [];

			window.addEventListener('load',eventWindowLoaded, false);
			function eventWindowLoaded(){
				canvas = document.getElementById("mainCanvas");
				context = canvas.getContext('2d');
				WIDTH = window.innerWidth;
				HEIGHT = window.innerHeight;

				canvas.width = WIDTH;
				canvas.height = HEIGHT;

				canvas.addEventListener('mousedown', mouseDown, false);

				context.fillStyle = "black";
				context.fillRect(0, 0, WIDTH, HEIGHT);

				if(window.DeviceOrientationEvent){
					eventOrientation = function(eventData){
						var tiltLR = eventData.gamma;
						var tiltFB = eventData.beta;
						deviceOrientationHandler(tiltLR, tiltFB);
					}
					window.addEventListener('deviceorientation',eventOrientation, false);
					balls.push(new Ball());
					setInterval(frameDrawer, 30);
				}else if(window.OrientationEvent){
					eventMozOrientation = function(eventData){
						var tiltLR = eventData.x * 90;
						var tiltFB = eventData.y * -90;
						deviceOrientationHandler(tiltLR, tiltFB);
					}
					window.addEventListener('MozOrientation',eventMozOrientation, false);
					balls.push(new Ball());
					setInterval(frameDrawer, 30);
				}else{
					context.fillStyle = "#ffffff";
					context.font = "20px arial";
					context.textBaseLine = "middle";
					context.textAlign = "center";
					context.fillText("Your browser doesn't support tilt sensor", WIDTH/2, HEIGHT/2);
				}

			}
			function deviceOrientationHandler(tiltLR, tiltFB){
				var tiltHorizontal = (tiltLR <= 90)?tiltLR:(180-tiltLR);
				var tiltVertical = (tiltFB <= 90)?tiltFB:(180-tiltFB);


				for(var i in balls){
					var ball = balls[i];

					ball.vx += tiltHorizontal;
					ball.vy += tiltVertical;
				}
			}
			function frameDrawer(){
				context.fillStyle = "black";
				context.fillRect(0,0,WIDTH,HEIGHT);

				for(var i in balls){
					var ball = balls[i];
					ball.friction();
					ball.checkBounce();
					ball.move();
					ball.draw(context);
				}

			}


			function Ball(X, Y){
				if(X){
					this.x = X;
				}else{
					this.x = WIDTH/2;
				}
				if(Y){
					this.y = Y;
				}else{
					this.y = HEIGHT/2;
				}
				this.vx = 0;
				this.vy = 0;
				this.radius = Math.random()*2 + 1;
				this.color = randomColor();
			}

			Ball.prototype.checkBounce = function(){
				var willX = this.x + this.vx;
				var willY = this.y + this.vy;

				if(willX < 0 || willX > WIDTH){
					this.vx *= -1;
				}
				if(willY < 0 || willY > HEIGHT){
					this.vy *= -1;
				}
			}
			Ball.prototype.friction = function(){
				this.vx *= (15-this.radius)/15;
				this.vy *= (15-this.radius)/15;
			}
			Ball.prototype.move = function(){
				this.x += this.vx;
				this.y += this.vy;
			}
			Ball.prototype.draw = function(ctx){
				var direction = Math.atan2(this.vy, this.vx);
				ctx.save();
				ctx.strokeStyle = this.color;
				ctx.lineWidth = 4;
				ctx.translate(this.x, this.y);
				ctx.rotate(direction);
				ctx.scale(this.radius, this.radius);
				ctx.beginPath();
				ctx.moveTo(20,0);
				ctx.lineTo(-20,-10);
				ctx.lineTo(-10,0);
				ctx.lineTo(-20,10);
				ctx.closePath();
				ctx.stroke();
				ctx.restore();
			}

			function randomColor(){
				var r = Math.floor(Math.random() * 255);
				var g = Math.floor(Math.random() * 255);
				var b = Math.floor(Math.random() * 255);

				return "rgb("+r+","+g+","+b+")";
			}
			function mouseDown(event){
				event.preventDefault();
				balls.push(new Ball(event.offsetX, event.offsetY));
			}
		</script>
		<title>Tilt</title>
	</head>
	<body>
		<canvas id="mainCanvas">Your browser doesn't support canvas tag</canvas>
	</body>
</html>
